<!--
 * @Description: 主页
 * @Author: charles
 * @Date: 2021-08-01 14:08:21
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-08-03 16:21:49
-->
<template>
  <div class="home">
    <!-- 头部 -->
    <Header></Header>
    <!-- 头部 -->
    <!-- 体部 -->
    <div class="content">
      <!-- 轮播图 -->
      <div class="carousel">
        <el-carousel height="500px">
          <el-carousel-item v-for="item in carousels" :key="item.id">
            <img :src="item.url" alt="">
          </el-carousel-item>
        </el-carousel>
      </div>
      <!--/轮播图 -->
      <!-- 板块 -->
      <div class="wrapper">
        <div class="plates">
          <div class="plate" v-for="i in 7" :key="i">
            <div class="head">
              <div class="title">学术成果</div>
              <div class="more">更多&gt;&gt;</div>
            </div>
            <ul class="list">
              <li>湖北大学刘俊松教授应邀来校开展学术交流</li>
              <li>校领导检查指导本科招生录取工作</li>
              <li>关于推荐充实山西省非主要农作物品种认定专家库人选的通知</li>
            </ul>
          </div>
        </div>
      </div>
      <!-- /板块 -->

    </div>
    <!-- /体部 -->
   <!-- 底部 -->
   <Footer></Footer>
   <!-- 底部 -->

  </div>
</template>
<script>
import {get} from '../utils/request'
import Header from './components/Header'
import Footer from './components/Footer.vue'
export default {
  // 4.局部组建注册
  components:{
    Header,
    Footer
  },
  // 1. 数据
  data(){
    return {
      carousels:[]
    }
  },
  // 2. 生命周期钩子函数 - 在vue的生命周期各个阶段会执行的代码
  created(){
    this.loadCarousels();
  },
  // 3. 方法，一般用来定义方法或者事件处理函数
  methods:{
    // 加载轮播图数据
    loadCarousels(){
      let url = '/index/carousel/findAll'
      get(url).then(resp => {
        this.carousels = resp.data;
      })
    }
    // 加载板块数据
    // loadCategoryAndArticles(){
    //     let url = '/index/category/findAll'
    //     get(url).then(resp => {
    //       this.category = resp.data;
    //   })
    // }
  }
}
</script>
<style lang="scss" scoped>
// 变量
$color_primary:#028b39;

.home {
 
  // 内容样式
  .content {
    background-color: #ecf6f2;
    .carousel {
      img {
        width:100%;
      }
    }
    .plates::after {
      content:"";
      display: block;
      clear: both;
    }
    .plates {
      padding:.5em 0;
      .plate {
        box-sizing: border-box;
        float: left;
        width: 32.5%;
        height: 300px;
        background-color: #fff;
        padding: .5em;
        margin-right: 1.25%;
        margin-bottom: .5em;
        .head {
          display: flex;
          justify-content: space-between;
          .title {
            font-size: 18px;
            font-weight: bold;
            color: $color_primary;
          }
          .more {
            color: #999;
            font-size: 12px;
            cursor: pointer;
          }
        }
        ul.list {
          li {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 2em;
            cursor: pointer;
          }
          li:hover {
            color: $color_primary;
          }
        }

      }
      .plate:nth-child(3n){
        margin-right: 0;
      }
    }
  }
  
}
</style>